<template>
  <!-- 近期波放列表 -->
  <div class="comesoon-moivelist-wrap">
      <div v-for="item in comingList" :key="item.id" class="moive-list">
        <div class="moive-img">
          <img :src="item.img | filterImg " alt />
        </div>
        <div class="moive-content-wrap">
          <div class="moive-content-left-wrap" @tap="toDetailMovie(item)">
            <div class="moive-title">
              <p>{{item.nm}}</p>
                <img v-if="item.version==='v2d imax'" class="version" src="@/assets/images/2DIMAX.png" />
                <img v-if="item.version==='v3d imax'" class="version" src="@/assets/images/3DIMAX.png" />
                <img v-if="item.version==='imax'" class="version" src="@/assets/images/IMAX.png" />
                <img v-if="item.version==='v3d'" class="version3d" src="@/assets/images/3D.png" />
            </div>

            <div class="moive-score">
              <span class="wish">{{item.wish}}</span> 人想看
            </div>

            <div class="moive-actor">主演：{{item.star}}</div>
            <div class="comingTitle" v-if="!item.showInfo"> {{item.comingTitle}}</div>

            <div class="moive-actor" v-if="item.showInfo">{{item.showInfo}}</div>
          </div>

          <div class="moive-wish-btn sell" v-if="item.showInfo" @tap="ToMovieCinemaPage(item)">预售</div>
          <div class="moive-wish-btn" v-else @tap="ToMovieCinemaPage(item)">想看</div>
        </div>
      </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Loading from '@/components/loading/loading'

export default {

  props: ['comingList'],
  components: {
    Loading
  },
  computed: {
    ...mapState(['currentCity'])
  },
  filters: {
    filterImg (value) {
      return value.replace('w.h', '128.180')
    }
  },
  methods: {
    ToMovieCinemaPage (item) {
      if (item.showInfo) {
        this.$router.push({ path: '/movieCinemaPage', query: { movieID: item.id } })
      }
    },
    toDetailMovie (item) {
      this.$router.push('/detailmovie/' + item.id)
    }
  }
}
</script>
<style>
.comesoon-moivelist-wrap {
  background: #fff;
  padding: 0 15px
}
.wish{
  font-size: 14px;
  color: #ffb400;
  font-weight: bold;
}
  .moive-wish-btn {
  flex-shrink: 0;
  padding: 4px 10px;
  background: #ffb400;
  color: white;
  font-size: 13px;
  border-radius: 5px;
}
.comingTitle{
  font-size: 13px;
  color: #666;
  padding-top: 2px
}
.sell{
  background-color: #3c9ee6
}
</style>
